<template>
  <div>
    <h1>分类</h1>
    <h3>仓库中的数据: {{ name }}</h3>
    <h3>仓库中的数据计算属性：{{ username }}</h3>
    <h3>仓库中的数据getter：{{ username1 }}</h3>
    <button @click="changeName">改变名字</button>
    <button @click="changeNameAsync">改名字</button>
  </div>
</template>

<script setup>
  // 如果在setup函数外使用，还是和vue2的操作是一样的，还是使用辅助性函数去实现
  
  //1.在setup函数中，不能使用辅助性函数，要从vuex中引出useStore，它调用产生仓库实例对象
  import { computed } from 'vue';
import { useStore } from 'vuex';

  //2.获取仓库实例
  let store = useStore();
  console.log(store);

  //3.获取仓库中的数据 -- 不是响应式数据
  let name = store.state.name;
  console.log(name);
    
  //4.获取仓库数据，通过计算属性的方式 -- 是响应式
  let username = computed(()=> store.state.name);

  //5.通过getters获取仓库中的数据
  let username1 = computed(()=> store.getters.get_name);


  //4.修改数据
  function changeName(){
    store.commit("mutation_name","妲己")
  }

  //6.异步改变数据
  function changeNameAsync(){
    store.dispatch("action_name","真要吃饭了");
  }

</script>

<style>

</style>